import { initData } from "./listTar.js";
import { listSort } from "@/api/list";
import { mapGetters } from "vuex";
import { ListTextTitle, SetChildItem } from "./mylistdata";
// import { setTextStyle } from "./listPubfun";
import _lodash from "lodash";
export default {
  computed: {
    ...mapGetters(["listPageStyle"]),
    // 列表设置Tab栏切换
    listTabs: {
      get: function() {
        var name = this.$store.state.list.childItem.name
        if (name) {
          switch (name) {
            case "DiyText":
              this.ItemName = "文本设置";
              break;
            case "DiyBtn":
              this.ItemName = "按钮设置";
              break;
            case "DiyImg":
              this.ItemName = "图片设置";
              break;
            case "DiyListLabel":
              this.ItemName = "标签设置";
              break;
            case "DiyListTime":
              this.ItemName = "时间设置";
              break;
            case "DiyListInventory":
              this.ItemName = "库存设置";
              break;
            case "DiyListPrice":
              this.ItemName = "价格设置";
              break;
            default:
              this.ItemName = "文本设置";
          }
          return "third";
        } else {
          return "first";
        }
      },
      set: function(val) {
        return val;
      }
    },
    // 文本字体设置
    sizeData: function() {
      var sizeArr = [];
      let n = 0;
      for (let i = 10; i <= 120; n++) {
        if (n <= 4) {
          i = i + 2;
          sizeArr[n] = i + "px";
        } else if (n === 5) {
          i = i + 4;
          sizeArr[n] = i + "px";
        } else if (n > 5 && n <= 9) {
          i = i + 6;
          sizeArr[n] = i + "px";
        } else if (n > 9 && n <= 15) {
          i = i + 12;
          sizeArr[n] = i + "px";
        } else {
          break;
        }
      }
      return sizeArr;
    },
    // 当前子组件索引值
    childIndex: function() {
      return this.$store.state.list.childItem.index;
    }
  },
  data() {
    return {
      activeNames: ["1"],
      //   编辑列表
      list: initData.list,
      fromType: initData.fromType,
      options: initData.options,
      value: "",
      showSort: "1",
      showNumber: "",
      ItemName: "文本设置",
      radio1: "1",
      listBg: "#616161",
      marketing: initData.marketing,
      styleIdx: 0,
      listW: "", // 列表宽
      listH: "", // 列表高度
      listRound: "", // 圆角
      listStyle: [
        {
          id: 0,
          text: "横版",
          img: require("@/assets/config_images/list_style1.png")
        },
        {
          id: 1,
          text: "竖版",
          img: require("@/assets/config_images/list_style2.png")
        }
      ],
      textStyel: [
        {
          id: 0,
          checkicon: "derline",
          uncheckicon: "un_derline",
          status: false
        },
        {
          id: 1,
          checkicon: "italic_check",
          uncheckicon: "italic_uncheck",
          status: false
        },
        {
          id: 2,
          checkicon: "strong",
          uncheckicon: "un_strong",
          status: false
        },
        {
          id: 3,
          checkicon: "left",
          uncheckicon: "un_left",
          status: true
        },
        {
          id: 4,
          checkicon: "center",
          uncheckicon: "un_center",
          status: false
        },
        {
          id: 5,
          checkicon: "right_qicheck",
          uncheckicon: "unright",
          status: false
        }
      ],
      ListTextTitle: ListTextTitle, // 文本设置
      textSize: "", // 文本大小设置
      pubColor: "", // 颜色
      bindName: "", // 绑定名称
      listTextVal: "", // 按钮文本内容
      btnWidth: 80, // 按钮宽度
      btnHeight: 30, // 按钮高度
      btnRound: 6,
      btnBgColor: "", // 按钮颜色
      listTextBtnColor: "", // 按钮文本颜色
      contourWidth: "0", // 描边宽度
      contourColor: "#f0f0f0", // 描边颜色
      imgWidth: 120, // 图片宽度
      imgHeight: 70, // 图片高度
      imgRound: 0, // 图片圆角
      valueSize: "",
      btn_radio: "1",
      border_radio: "1",
      dis_radio: "1",
      dis_icon: "1",
      local_radio: "1",
      format_radio: "1",
      interval_radio: "1",
      showTime_radio: "1",
      showformat_radio: "1",
      timescope_radio: "2",
      countdown_radio: "2",
      timestyle_radio: "2",
      view_radio: "1",
      inventory_icon: "1",
      grade_icon: "2",
      graphic_style: "1",
      score_radio: "1",
      precision: "1",
      Price_type: "1",
      Price_radio: "1",
      sales_volume: "1",
      Browse_number: "1",
      label_radio: "1",
      label_border: "1",
      showStyle: true,
      startTime: "",
      endTime: "",
      textObj: {
        mainKey: "",
        predefineColors: [
          "#ff4500",
          "#ff8c00",
          "#ffd700",
          "#90ee90",
          "#00ced1",
          "#1e90ff",
          "#c71585",
          "rgba(255, 69, 0, 0.68)",
          "rgb(255, 120, 0)",
          "hsv(51, 100, 98)",
          "hsva(120, 40, 94, 0.5)",
          "hsl(181, 100%, 37%)",
          "hsla(209, 100%, 56%, 0.73)",
          "#c7158577"
        ]
      }
    };
  },
  watch: {
    // 列表行业类型
    value: function(newVal) {
      this.listPageStyle.essentialKey.Industrylist = newVal;
    },
    // 列表显示条目
    showNumber: function(newVal) {
      this._getlodash(newVal, "num");
    },
    // 列表宽度
    listW: function(val) {
      this._getlodash(val, "listW");
    },
    // 列表高度
    listH: function(val) {
      this._getlodash(val, "listH")
    },
    // 列表背景颜色
    listBg: function(val) {
      this._getlodash(val, "bg")
    },
    // 列表圆角
    listRound: function(val) {
      this._getlodash(val, "round")
    },
    // 文本组件设置
    textSize: _lodash.debounce(function(val) {
      this.listPageStyle.childStyle[this.childIndex].style.fontSize = val;
      this.setPubCom();
    }, 800),
    // 设置颜色
    pubColor: function(val) {
      // 文本颜色设置
      this.listPageStyle.childStyle[this.childIndex].style.color = val;
      this.setPubCom();
    },
    // 按钮文本
    listTextVal: _lodash.debounce(function(val) {
      this.listPageStyle.childStyle[this.childIndex].data = val;
      this.setPubCom();
    }, 800),
    // 按钮宽度
    btnWidth: _lodash.debounce(function(val) {
      this.listPageStyle.childStyle[this.childIndex].constyle.width = parseInt(val);
      this.setPubCom();
    }, 800),
    // 按钮宽度
    btnHeight: _lodash.debounce(function(val) {
      this.listPageStyle.childStyle[this.childIndex].constyle.height = parseInt(val);
      this.setPubCom();
    }, 800),
    // 按钮圆角
    btnRound: _lodash.debounce(function(val) {
      this.listPageStyle.childStyle[this.childIndex].style.borderRadius = parseInt(val) + 'px';
      this.setPubCom();
    }, 800),
    btnBgColor: _lodash.debounce(function(val) {
      this.listPageStyle.childStyle[this.childIndex].style.background = val;
      this.setPubCom();
    }),
    // 按钮文本颜色
    listTextBtnColor: _lodash.debounce(function(val) {
      this.listPageStyle.childStyle[this.childIndex].style.color = val;
      this.setPubCom();
    }),
    // 按钮描边粗细
    contourWidth: _lodash.debounce(function(val) {
      this.listPageStyle.childStyle[this.childIndex].style.borderWidth = val + 'px';
      this.setPubCom();
    }, 800),
    // 按钮颜色
    contourColor: function(val) {
      this.listPageStyle.childStyle[this.childIndex].style.borderColor = val;
      this.setPubCom();
    },
    // 图片宽度
    imgWidth: _lodash.debounce(function(val) {
      this.listPageStyle.childStyle[this.childIndex].constyle.width = parseInt(val);
      this.setPubCom();
    }, 800),
    // 图片高度
    imgHeight: _lodash.debounce(function(val) {
      this.listPageStyle.childStyle[this.childIndex].constyle.height = parseInt(val);
      this.setPubCom();
    }, 800),
    // 图片圆角
    imgRound: _lodash.debounce(function(val) {
      this.listPageStyle.childStyle[this.childIndex].style.borderRadius = val + "px";
      this.setPubCom();
    }, 800)
  },
  mounted() {
    this.getListSort();
  },
  methods: {
    // 属性公共设置方法
    setPubCom() {
      this.$store.commit('list/SET_ListObj', this.listPageStyle);
      this.$store.dispatch("apply/PageJSONUpData");
      setTimeout(() => {
        this.$emit("updataNowPageJSON");
      }, 100)
    },
    // 获取行业列表
    getListSort() {
      const arr = [];
      listSort().then(res => {
        if (res.code === 200) {
          for (const i in res.data) {
            const obj = {};
            obj.value = res.data[i].id;
            obj.label = res.data[i].name;
            arr.push(obj);
          }
        }
      });
      this.options = arr;
    },
    // 设置列表样式
    setStyle(idx) {
      this.styleIdx = idx;
    },
    // 列表数量防抖
    _getlodash: _lodash.debounce(function(val, item) {
      switch (item) {
        case "num":
          this.listPageStyle.essentialKey.listNumber = val + 'px';
          break;
        case "listW":
          this.listPageStyle.essentialKey.width = val + 'px';
          break;
        case "listH":
          this.listPageStyle.essentialKey.height = val + 'px';
          break;
        case "bg":
          this.listPageStyle.essentialKey.background = val;
          break;
        case "round":
          this.listPageStyle.essentialKey.borderRadius = val + 'px';
          break;
        default:
          // 更新vuex里面的PageJSON
          this.$store.dispatch("apply/PageJSONUpData");
          // 更新父组件中的PageJSON
          this.$emit("updataNowPageJSON");
          break;
      }
    }, 700),
    // 字体样式
    changes(idx) {
      for (const i in this.textStyel) {
        if (i > 2) {
          if (Number(i) === idx) {
            this.textStyel[i].status = true;
          } else {
            this.textStyel[i].status = false;
          }
        } else {
          if (Number(i) === idx) {
            this.textStyel[idx].status = !this.textStyel[idx].status;
          }
        }
      }
      this.setPubTextStyle(this.textStyel);
    },
    // 设置公共字体样式
    setPubTextStyle(styleArr) {
      for (const i in styleArr) {
        switch (styleArr[i].id) {
          case 0:
            if (styleArr[i].status) {
              this.listPageStyle.childStyle[this.childIndex].style.textDecoration = "underline";
            } else {
              this.listPageStyle.childStyle[this.childIndex].style.textDecoration = "";
            }
            break;
          case 1:
            if (styleArr[i].status) {
              this.listPageStyle.childStyle[this.childIndex].style.fontStyle = "italic";
            } else {
              this.listPageStyle.childStyle[this.childIndex].style.fontStyle = "";
            }
            break;
          case 2:
            if (styleArr[i].status) {
              this.listPageStyle.childStyle[this.childIndex].style.fontWeight = "bold";
            } else {
              this.listPageStyle.childStyle[this.childIndex].style.fontWeight = "";
            }
            break;
          case 3:
            if (styleArr[i].status) {
              this.listPageStyle.childStyle[this.childIndex].style.textAlign = "left";
            } else {
              this.listPageStyle.childStyle[this.childIndex].style.textAlign = "";
            }
            break;
          case 4:
            if (styleArr[i].status) {
              this.listPageStyle.childStyle[this.childIndex].style.textAlign = "center";
            } else {
              this.listPageStyle.childStyle[this.childIndex].style.textAlign = "";
            }
            break;
          case 5:
            if (styleArr[i].status) {
              this.listPageStyle.childStyle[this.childIndex].style.textAlign = "right";
            } else {
              this.listPageStyle.childStyle[this.childIndex].style.textAlign = "";
            }
            break;
          default:
            this.setPubCom();
            break;
        }
      }
    },
    // 设置子组件属性
    setChildData: _lodash.debounce(function(name, value) {
      SetChildItem(name, value)
    }, 500),
    // 添加列表子组件
    addListComponent: _lodash.debounce(function(name, index) {
      console.log(name, index);
    }, 500)
  }
};
